<template>
  <div class="audio-index">
    <el-container>

        <!-- 导航栏 -->
        <el-header class="header" height="64px">
            <a href="#">华宇语音识别平台</a>
        </el-header>

        <!-- 内容栏 -->
        <el-main class="main">

            <!-- 内容介绍栏 -->
            <div class="introduction">
                <h1>语音识别</h1>
                <span class="introduction-text">介绍文字</span>
                <el-button class="introduction-button">立即接入</el-button>
                <el-button class="introduction-button">在线体验</el-button>
            </div>

            <!-- 示例语音 -->
            <div class="example">
                <h3>示例语音</h3>
                <el-divider></el-divider>
                <el-row :gutter="20">
                  <el-col :span="12">支持格式</el-col>
                  <el-col :span="12">识别结果</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12" style="padding: 16px 10px">
                      <el-tabs v-model="activeName" :tab-position="tabPosition" type="border-card" style="height:360px" @tab-click="handleClick">
                        <el-tab-pane label="示例一" name="first">我们都有一个家，名字叫中国。</el-tab-pane>
                        <el-tab-pane label="示例二" name="second">我们都有一个家，名字叫中国2。</el-tab-pane>
                        <el-tab-pane label="示例三" name="third">我们都有一个家，名字叫中国3。</el-tab-pane>
                        <el-tab-pane label="示例四" name="forth">我们都有一个家，名字叫中国4。</el-tab-pane>
                      </el-tabs>
                  </el-col>
                  <el-col :span="12" style="padding: 16px 10px">
                      <el-card class="box-card" style="height: 360px">
                        <div v-for="o in 4" :key="o">
                            {{ '我们都有一个家，名字叫中国。' + o}}
                        </div>
                      </el-card>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form :model="form" ref="form" label-width="70px">
                      <el-form-item label="使用引擎">
                          <el-checkbox-group v-model="form.type" style="float: left">
                            <el-checkbox label="ali" name="type"></el-checkbox>
                            <el-checkbox label="TDNN" name="type"></el-checkbox>
                            <el-checkbox label="DNN" name="type"></el-checkbox>
                            <el-checkbox label="DNN2" name="type"></el-checkbox>
                          </el-checkbox-group>
                          <el-button class="detect-button">开始识别</el-button>
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
            </div>
        </el-main>

        <!-- 底部栏 -->
        <el-footer class="footer">
            <p>版权所有：华宇上海研究院</p>
        </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AudioIndex',
  data () {
    return {
      activeIndex: '1',
      activeName: 'first',
      tabPosition: 'left',
      form: {
        type: []
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab.$el.innerText)
    }
  }
}
</script>

<style scoped>
.header {
    width: 100vw;
    padding: 0px 250px;
    z-index: 9999999;
    background-color: #fff;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei';
    box-shadow: 0 1px 9px #888;
}
.header a {
    text-decoration: none;
    outline: none;
    line-height: 64px;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
}
.main {
    padding: 0px;
    margin: 0px;
}
.introduction {
    height: 450px;
    padding: 0 250px;
    background-image: linear-gradient(to right, rgb(28, 16, 16), rgb(83, 74, 67));
}
.introduction h1 {
    margin: 0px;
    color: white;
    font-size: 36px;
    padding-top: 70px;
}
.introduction-text {
    display: block;
    color: white;
    font-size: 24px;
    line-height: 18px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.introduction-button {
    border-radius: 0px;
    border: 1px solid white;
    background-color: black;
    color: white;
}
.introduction-button:hover {
    background-color: #e6e6e6;
    color: #2c3e50;
}
.footer {
    background-color: rgb(24, 25, 25);
    color: white;
    width: 100vw;
    text-align: center;
}
.footer p {
    margin: 0px;
    font-size: 14px;
    line-height: 60px;
}
.example {
    height: 600px;
    max-width: 1000px;
    min-width: 1000px;
    padding: 50px 250px;
    margin: 0 auto;
}
.example h3 {
    margin: 0;
    text-align: center;
}
.detect-button {
    margin-left: 20px;
    color: white;
    border: none;
    border-radius: 0px;
    background-color: rgb(255, 120, 24)
}
.detect-button:hover {
    opacity: .8;
}
</style>
